function initOrderMileage(){
    var dom1=document.getElementById('orders-mileage');
    var myChart1=echarts.init(dom1);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'mileage',
                type: 'bar',
                barWidth: '40%',
                data: [120,100,80,110,90]
            }
        ]
    };
    myChart1.setOption(option)
    return myChart1;
}
function initIdling(){
    var demo2=document.getElementById('orders-idling');
    var myChart2=echarts.init(demo2);
    var option = {
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', 'max', 'min', 'avg'],
                ['20210828112244', 20, 5, 8],
                ['20210828112245', 30,5,10],
                ['20210828112246', 60,10,30],
                ['20210828112247', 20,5,1],
                ['20210828112248',10,10,10]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    
    myChart2.setOption(option);
    return myChart2;
}
function initSpeed(){
    var demo3=document.getElementById('orders-speed');
    var myChart3=echarts.init(demo3);
    var option = {
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        dataset: {
            source: [
                ['product', 'max', 'min', 'avg'],
                ['20210828112244', 120, 60, 80],
                ['20210828112245', 100,40,50],
                ['20210828112246', 80,30,60],
                ['20210828112247', 110,60,70],
                ['20210828112248',90,50,60]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    
    myChart3.setOption(option);
    return myChart3;
}
function initTime(){
    var dom4=document.getElementById('orders-time');
    var myChart4=echarts.init(dom4);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['0','1', '2', '3', '4', '5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'mileage',
                type: 'bar',
                barWidth: '40%',
                data: [, , , , , , , , , ,2,3, ,1,1,2,6,3, , , , , , ]
            }
        ]
    };
    myChart4.setOption(option);
    return myChart4;
}
function initLocation(){
    var dom5=document.getElementById('orders-location');
    var myChart5=echarts.init(dom5);
    option = {
        dataset: {
            source: [
                ['number', 'location'],
                [2, '辽宁省大连市高新园区汇贤园11号'],
                [4, '辽宁省大连市高新园区汇贤园10号'],
                [5, '辽宁省大连市高新园区汇贤园9号'],
                [7, '辽宁省大连市高新园区汇贤园8号'],
                [8, '辽宁省大连市高新园区汇贤园7号'],
                
            ]
        },
        grid: {
            top:10,
            left: '3%',
            right: '10%',
            bottom: '30',
            containLabel: true
        },
        xAxis: {name: 'number'},
        yAxis: {type: 'category'},
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        series: [
            {
                type: 'bar',
                
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'location'
                }
            }
        ]
    };
    myChart5.setOption(option);
    return myChart5;
}
function initFuel(){
    var dom6=document.getElementById('orders-fuel');
    var myChart6=echarts.init(dom6);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:10,
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true
        },
        xAxis: [
            {
                "axisLabel":{     //加上这个强制显示
                    interval: 0
                  },
                type: 'category',
                data: ['202108112244', '202108112245', '202108112246', '202108112247', '202108112248'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'oil_consumption',
                type: 'bar',
                barWidth: '40%',
                data: [8,9,8,10,12]
            }
        ]
    };
    myChart6.setOption(option)
    return myChart6;
}
function initFailreason(){
    var demo7=document.getElementById('orders-failreason');
    var myChart7=echarts.init(demo7);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['请求超时', '费用计算超时', '费用计算错误', '定位为空', '还车检查项不符','不在还车网点','客户主动取消']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '50%',
                center: ['50%', '45%'],
                data: [
                    {value: 667, name: '请求超时'},
                    {value: 333, name: '费用计算超时'},
                    {value: 1000, name: '费用计算错误'},
                    {value: 667, name: '定位为空'},
                    {value: 3000, name: '还车检查项不符'},
                    {value: 2333, name: '不在还车网点'},
                    {value: 2000, name: '客户主动取消'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    myChart7.setOption(option);
    return myChart7;
}
function initAlarm(){
    var demo8=document.getElementById('orders-alarm');
    var myChart8=echarts.init(demo8);
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            show:true,
            x: 'center', // 'center' | 'left' | {number},
            y: 'bottom', // 'center' | 'bottom' | {number}
            data: ['发动机舱盖开启请求超时', '碰撞', '烟雾', '酒精']
        },
        series: [
            {
                name: 'number',
                type: 'pie',
                radius: '50%',
                center: ['50%', '45%'],
                data: [
                    {value: 833, name: '发动机舱盖开启请求超时'},
                    {value: 3750, name: '碰撞'},
                    {value: 2500, name: '烟雾'},
                    {value: 2917, name: '酒精'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    myChart8.setOption(option);
    return myChart8;
}






function resizeAllCharts(){
    //resize方式2
    // var compareChart = echarts.getInstanceByDom(document.getElementById("time-usingcar"));
    // compareChart.resize();

    var allChartsDom = document.getElementsByClassName("speed-chart");//class
    for (var i = 0; i < allChartsDom.length; i++) {
        var chatsDom = allChartsDom[i];
        var compareChart = echarts.getInstanceByDom(chatsDom);
        if(compareChart){
            compareChart.resize();
        }
    }

   
    // allCharts.forEach(chats => {
    //     chats.resize();
    // });
}
window.onload = function(){
    initOrderMileage();
    initIdling();
    initSpeed();
    initTime();
    initLocation();
    initFuel();
    initFailreason();
    initAlarm();
    //resize 方式1
    // allCharts.push(chats);
    
};
window.onresize = function(){
    resizeAllCharts();
};